import * as echarts from '../../ec-canvas/echarts.js';
function getLineData(callback,_this) {
  wx.request({
    url: 'http://47.120.31.85:8080/word/getRecentSevenDayLearnData?username=' + _this.data.userInfo.nickName,
    method: "GET",
    success: function(res) {
      const learnDate = res.data.data.learnDate
      const learnValue = res.data.data.learnCount
      callback(learnDate,learnValue,_this)
    }
  })
}

function initLineEcharts(learnDate,learnValue,_this) {
  _this.ecLineComponent.init((canvas, width, height, dpr) => {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr // new
    });
    canvas.setChart(chart);
   
    var option = {
      grid: {
        containLabel: true,
        left: "5%",
        top: "10%",
        bottom: "0%"
      },
      tooltip: {
        show: true,
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: learnDate,
      },
      yAxis: {
        x: 'center',
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      series: [{
        type: 'line',
        smooth: true,
        data: learnValue
      }]
    };
   
    chart.setOption(option);
    return chart;
  })
}

function getPieData(callback,_this) {
  wx.request({
    url: 'http://47.120.31.85:8080/word/getTodayLearnData?username=' + _this.data.userInfo.nickName,
    method: "GET",
    success: function(res) {
      console.log(res)
      let learnData = []
      for ( let i = 0 ; i < res.data.data.length ; i ++ ) {
        const data = {value: res.data.data[i].value, name: res.data.data[i].type }
        learnData.push(data)
      }
      callback(learnData,_this)
    }
  })
}

function initPieEcharts(learnData,_this) {
  _this.ecPieComponent.init((canvas, width, height, dpr) => {
    const _this = this;
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr // new
    });
    canvas.setChart(chart);
   
    var option = {
      grid: {
        containLabel: true,
        left: "5%",
        top: "10%",
        bottom: "0%"
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      tooltip: {
        show: true,
        trigger: 'item'
      },
      series: [{
        type: 'pie',
        radius: '50%',
        data: learnData,
      }]
    };
   
    chart.setOption(option);
    return chart;
  })
}
 
Page({
  data: {
    userInfo: {},
    LineDate: [],
    LineValue: [],
    PieData: '',
    ecLine: {
      lazyLoad: true
    },
    ecPie: {
      lazyLoad: true
    }
  },

  onShow: function() {
    //获取用户的本地缓存数据，userinfo信息是在用户授权登录时保存的
    var info = wx.getStorageSync("userinfo");
    //当本地缓存的用户名称不为""或者null时，设置userinfo信息
    if(info.nickName != '' && info.nickName != null){
      this.setData({
          userInfo: info,
          hasUserInfo:true,
          canIUseGetUserProfile:true
      })
    }
  },
 
  onReady() {
      this.ecLineComponent = this.selectComponent('#mychart-dom-line');
      getLineData(initLineEcharts,this)
      this.ecPieComponent = this.selectComponent('#mychart-dom-pie');
      getPieData(initPieEcharts,this)
  }
});
